<template>
  <view class="store-info">
    <view class="store-name">
      <text>{{ commonStore.storeAndCityInfo.branchName }}</text>
    </view>
    <image class="store-icon" :src="commonStore.baseImageUrl + 'test-yujia/reservation/arrow-right1.png'
      " />
  </view>
  <view class="schedule-container">
    <!-- 左侧时间轴 -->
    <view class="time-axis">
      <view :class="['time-slot', { active: currentIndex === index }]" v-for="(timeSlot, index) in scheduleData"
        :key="timeSlot.timeSegment" @tap="handleTimeSlot(index)">
        <text>{{ timeSlot.timeSegment }}</text>
        <text class="status">{{ getStatusText(timeSlot.status) }}</text>
      </view>
    </view>

    <!-- 右侧课程信息 -->
    <view class="course-content">
      <view class="time-block" v-if="currentTimeSlot">
        <view class="course-item" v-for="teacher in currentTimeSlot.teacherList"
          :key="teacher.teacherCode + currentTimeSlot.timeSegment" @tap="handleTeacher(teacher)">
          <TeacherInfo :teacher="teacher" />
          <view class="course-teacher-status" v-if="currentTimeSlot.status == 0">
            <text class="book-btn" @tap="handleBook(timeSlot.timeSegment, teacher)">{{ teacher.isCourse ? "已被约" : "预约"
            }}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed } from "vue";
import { useCommonStore } from "@/store";
import TeacherInfo from "@/components/TeacherInfo.vue";

const commonStore = useCommonStore();

const props = defineProps({
  scheduleData: {
    type: Array,
    default: () => [],
  },
});

const currentIndex = ref(0);

const currentTimeSlot = computed(() => {
  return props.scheduleData[currentIndex.value];
});

const handleTimeSlot = (index) => {
  currentIndex.value = index;
};

const handleTeacher = (teacher) => {
  const { branchCode } = commonStore.storeAndCityInfo;
  uni.navigateTo({
    url: `/pages/subpackages/shopCenter/teacher-detail?teacherCode=${teacher.teacherCode}&branchCode=${branchCode}`
  });
};

const handleBook = (course) => {
  if (course.status === "booked") return;
  // 处理预约逻辑
};

// 获取等级图标
const getLevel = (level) => {
  const levelMap = {
    1: "初级",
    2: "中级",
    3: "高级",
  };
  return levelMap[level] || "";
};

// 获取状态文本
const getStatusText = (status) => {
  const statusMap = {
    0: "未开始",
    1: "进行中",
    2: "已结束",
  };
  return statusMap[status] || "";
};
</script>

<style lang="scss" scoped>
.store-info {
  display: flex;
  align-items: center;
  border-radius: 20rpx;
  font-size: 26rpx;
  color: #343434;
  margin-bottom: 20rpx;

  .store-icon {
    width: 18rpx;
    height: 18rpx;
  }
}

.schedule-container {
  display: flex;
  gap: 20rpx;

  .time-axis {
    width: 120rpx;
    flex-shrink: 0;
    background: #E0E0DA;

    .time-slot {
      height: 120rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      font-size: 28rpx;
      color: #333;
      box-sizing: border-box;

      &.active {
        background: #EDEDE4;
        border-left: 2rpx solid #7FAA1C;
      }

      .status {
        font-size: 24rpx;
        color: #999;
        margin-top: 4rpx;
      }
    }
  }

  .course-content {
    flex: 1;

    .course-item {
      background: #e7e7e1;
      border-radius: 24rpx;
      padding: 20rpx;
      margin-bottom: 20rpx;



      .course-teacher-status {
        display: flex;
        align-items: flex-end;
        justify-content: flex-end;

        .book-btn {
          background: #add21e;
          color: #fff;
          font-size: 24rpx;
          padding: 8rpx 40rpx;
          border-radius: 30rpx;
          width: 74rpx;
          height: 30rpx;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
    }
  }
}
</style>